<template>
  <div class="filter-range-number">
    <InputNumber v-model:value="value1" />
    <span>至</span>
    <InputNumber v-model:value="value2" />
  </div>
</template>

<script lang="ts">
import { PropType, defineComponent, ref, watch } from 'vue'
import { InputNumber } from 'ant-design-vue'

export default defineComponent({
  name: 'BwDesignFilterTableComFilterRangeNumber',
  components: {
    InputNumber,
  },
  props: {
    value: {
      type: [Array] as PropType<number[]>,
    },
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    const value1 = ref<number>()
    const value2 = ref<number>()

    watch(
      () => props.value,
      (newVal) => {
        value1.value = newVal?.[0]
        value2.value = newVal?.[1]
      },
      { immediate: true, deep: true }
    )
    watch([() => value1.value, () => value2.value], ([value1, value2]) => {
      if (JSON.stringify(props.value) !== JSON.stringify([value1, value2])) {
        emit('update:value', [value1, value2])
      }
    })

    return { value1, value2 }
  },
})
</script>

<style lang="less" scoped>
.filter-range-number {
  display: flex;
  align-items: center;
}
</style>
